import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
import {HomepageService} from "../../homepage.service";
import {ActivatedRoute, Router} from "@angular/router";
import {Observable} from "rxjs";

import {ToolsService} from "@shared/service/tools/tools.service";
import {ToolbarService} from "@shared/components/toolbar/toolbar.service";
import {UserAlbumFileVO, UserInfoVO} from "@interface/index";


@Component({
  selector: 'seed-my-picture',
  templateUrl: 'my-picture.component.html',
  styleUrls: ['my-picture.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyPictureComponent implements OnInit, OnDestroy {
  public userId: UserInfoVO;
  public gallery: Observable<UserAlbumFileVO[]>;
  public scrollContainer: any;

  constructor(public router: Router,
              public homepageService: HomepageService,
              public toolsService: ToolsService,
              public _activatedRoute: ActivatedRoute,
              public toolBarService: ToolbarService) {
    this.gallery = this.homepageService.gallery;
  }

  gotoBigPicture(number, idx) {
    this.router.navigate(['/homepage/viewer/' + number], {queryParams: {index: idx}});
  }

  ngOnInit() {
    this._activatedRoute.queryParams
      .do(() => this.toolBarService.unfoldNav())
      .subscribe(param => {
        this.userId = param['userId'];
        if (param['userId']) {
          this.homepageService.getUserAlbum(param['userId'], 2, 1, 1, 30);
        }
      });
    this.scrollContainer = document.querySelector('#seed-scroll-content');
  }

  ngOnDestroy() {
    this.toolsService.hideLoading();
  }

}
